<template>
  <div>
    <div class="title">素材列表</div>
    <div class="list_box">
      <div class="list_item" @click="showProgram(item)" v-for="item,index in programData" :key="index">
        <div class="left_item ell">
          <span>{{item.key}}</span>
          <span>{{item.winName}}</span>
        </div>
        <div class="right_item">
          <a-popconfirm
            title="确定删除该窗口吗？"
            @confirm.stop="delProgram(item.key,item.type)"
          >
            <a-icon @click.stop="" type="delete" style="color:red" />
          </a-popconfirm>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters, mapMutations} from 'vuex';
export default {
  data() {
    return {};
  },
  props: {
    id: {
      type: String
    },
  },
  created () {
    console.log(this.programData);
  },
  methods: {
    ...mapMutations("program", ["delProgramData"]),
    delProgram(key,type){
      this.delProgramData(key);
      if(type == '3'){
        document.getElementById(`timeWindow${key}`).remove();
      } else if(type == '1'){
        document.getElementById(`singleText${key}`).remove();
      } else if(type == '2'){
        document.getElementById(`multiText${key}`).remove();
      } else if(type == '4'){
        document.getElementById(`table${key}`).remove();
      }
      console.log(key);
      this.$emit('delTabs',key);
    },
    showProgram(item){
      this.$emit('changeTabs',item)
    }
  },
  computed: {
    ...mapGetters("program", ["programData"]),
  },
};
</script>

<style lang="less" scoped>
.title{
  width: 100%;
  height: 46px;
  line-height: 46px;
  padding-left: 12px;
  font-size: 15px;
  color: #333;
  border-bottom: 1px solid #eee;
}
.list_item{
  display: flex;
  padding: 8px 12px;
  justify-content: space-between;
  align-items: center;
  border-bottom:1px solid #eee;
  .left_item{
    span{
      &:first-of-type{
        margin-right: 20px;
      }
    }
  }
}
</style>
